<template>
    <el-form :model="form" label-width="80px" v-loading="formLoading">
        <el-form-item label="用户姓名">
            <el-input v-model="form.nickname" disabled />
        </el-form-item>
        <el-form-item label="角色列表">
            <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
                全选
            </el-checkbox>
        </el-form-item>
        <el-form-item>
            <el-checkbox-group v-model="form.roles" @change="handleCheckedChange">
                <el-checkbox v-for="role in allRoleList" :key="role.id" :label="role.name" :value="role">
                    {{ role.name }}
                </el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submit" :loading="loading">确定</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts" name="AllocateRole">
import { ref, reactive, onMounted } from 'vue';
import type { CheckboxValueType } from 'element-plus'
import { ElMessage } from 'element-plus';
import type { UserType } from '@/api/user/types';
import type { RoleType } from '@/api/role/types';
import { roleList } from '@/api/role';
import { userAllocRole, userGetById } from '@/api/user';

const props = defineProps(['id'])
const emit = defineEmits(['allocateSuccess'])

const loading = ref(false)
const formLoading = ref(false)
const isIndeterminate = ref(false)
const checkAll = ref(false)

const allRoleList = ref<RoleType[]>([])
const form = reactive<UserType>({ nickname: '', roles: [] })

onMounted(() => {
    loadRoleForm()
})

const loadRoleForm = async () => {
    formLoading.value = true
    await loadRoleList()
    await loadUser()
    formLoading.value = false
}

const loadRoleList = async () => {
    const data = await roleList()
    allRoleList.value = data.data
}

const loadUser = async () => {
    const data = await userGetById(props.id)
    Object.assign(form, data.data)
    const checkedCount = form.roles?.length as number
    checkAll.value = checkedCount === allRoleList.value.length
    isIndeterminate.value = checkedCount > 0 && checkedCount < allRoleList.value.length
}

// 全选按钮
const handleCheckAllChange = (val: CheckboxValueType) => {
    form.roles = val ? allRoleList.value : []
    isIndeterminate.value = false
}
// 选择角色按钮
const handleCheckedChange = (value: CheckboxValueType[]) => {
    const checkedCount = value.length
    checkAll.value = checkedCount === allRoleList.value.length
    isIndeterminate.value = checkedCount > 0 && checkedCount < allRoleList.value.length
}

// 提交分配角色
const submit = async () => {
    try {
        loading.value = true
        const data = await userAllocRole({ id: props.id, roles: form.roles as RoleType[] })
        if (data.code === 200) {
            ElMessage.success('分配成功')
            emit('allocateSuccess')
        }
    } finally {
        loading.value = false
    }
}
</script>

<style scoped lang="scss"></style>
